<template>
    <div class="note-publish">
      <div class="editor">
        <QuillEditor theme="snow" v-model:content="state.content" placeholder="请输入笔记内容" contentType="html" />
      </div>
  
      <div class="note-wrap">
        <div class="note-cell">
          <van-field v-model="state.title" label="标题" placeholder="请输入标题" />
        </div>
  
        <div class="note-cell">
          <van-field label="图片上传">
            <template #input>
              <van-uploader v-model="state.img" :after-read="afterRead" max-count="1" />
            </template>
          </van-field>
  
        </div>
  
        <div class="note-cell">
          <div class="sort" @click="showPicker = true">
            <span>分类</span>
            <span>{{state.note_type}} <van-icon name="arrow" /></span>
          </div>
  
          <van-popup 
            v-model:show="showPicker" 
            round 
            position="bottom"
          >
            <van-picker 
              :columns="columns" 
              @cancel="showPicker = false" 
              @confirm="onConfirm" />
          </van-popup>
        </div>
  
      </div>
  
      <div class="btn">
        <van-button type="primary" block @click="publish">发布笔记</van-button>
      </div>
    </div>
  </template>
  
  <script setup>
  import { QuillEditor } from '@vueup/vue-quill'
  import '@vueup/vue-quill/dist/vue-quill.snow.css';
  import { reactive, ref } from 'vue';
  import axios from '@/api'
  import { useRouter } from 'vue-router'
  import { showToast } from 'vant';
  // const actions = [
  //   { name: '美食' },
  //   { name: '旅行' },
  //   { name: '恋爱' },
  //   { name: '学习' },
  //   { name: '吵架' }
  // ]
  
  const state = reactive({
    content: '',
    title: '',
    img: [],
    note_type: '美食'
  })
  
  const afterRead = (file) => {
    console.log('图片读取到了', file);
  }
  
  const showPicker = ref(false)
  const columns = [
    { text: '美食', value: '美食' },
    { text: '旅行', value: '旅行' },
    { text: '恋爱', value: '恋爱' },
    { text: '学习', value: '学习' },
    { text: '吵架', value: '吵架' },
  ]
  const onConfirm = ({selectedValues}) => {
    state.note_type = selectedValues[0]
    showPicker.value = false
  }
  
  // 发布
  const router = useRouter()
  const publish = async() => {
    const res = await axios.post('/note-publish', {
      title: state.title,
      note_content: state.content,
      head_img: state.img.length ? state.img[0].content : '',
      note_type: state.note_type
    })
    showToast(res.msg)
    setTimeout(() => {
      router.push('/noteClass')
    }, 1000);
  }
  
  </script>
  
  <style lang="less" scoped>
  .note-publish {
    min-height: 100vh;
  
    :deep(.ql-container) {
      height: 200px;
    }
  
    .note-cell {
      border-bottom: 1px solid #d1d5db;
  
      .sort {
        display: flex;
        justify-content: space-between;
        line-height: 3;
        padding: 3px 16px;
        color: #323233;
      }
    }
  
    .btn{
      width: 80%;
      margin: 0 auto;
      margin-top: 2rem;
    }
  }
  </style>